<template>
  <div>
    counter:{{ counter1 }}
    <br />
    counter:{{ counter }}
    <button @click="onAdd">+1</button>
    <button @click="onReduce">-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 1,
    };
  },
  //计算属性
  computed: {
    //挂在this上，直接使用this.counter1即可
    counter1() {
      return this.counter * 2;
    },
  },
  methods: {
    onAdd() {
      this.counter++;
    },
    onReduce() {
      this.counter--;
    },
  },
};
</script>

<style>
</style>
